<template>
  <div class="updata">
    <div class="updata_hander">
      <h1 class="updata_title">商品管理 -- 修改商品</h1>
    </div>
    <div class="updata_content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input placeholder="请输入商品描述" v-model="form.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.region" @change="regionChange" placeholder="请选择一级品类">
            <el-option
              v-for="(item,index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select v-if="form.region" v-model="form.region2" placeholder="请选择二级品类">
            <el-option
              v-for="(item,index) in region2list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input class="inp" placeholder="价格" v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input class="inp" placeholder="库存" v-model="form.stock">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="upload-demo"
            action="http://admintest.happymmall.com/manage/product/upload.do"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
          >
            <img
              class="image"
              v-if="form.mainImage"
              :src="form.imageHost+form.mainImage"
              alt
              srcset
            />
            <img
              class="image"
              v-else
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113118119&di=d3fbabb647a1691ced3e6ae869b293a3&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D30305038%2C711507037%26fm%3D214%26gp%3D0.jpg"
              alt
              srcset
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="商品详情">
          <quill-editor
            :value="form.detail"
            :options="editorOption"
            @change="onEditorChange($event)"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { deatil, updataComm, category1 } from "../../request/http";
export default {
  data() {
    return {
      form: {},
      region1list: [],
      region2list: [],
      editorOption: {
        // Some Quill options...
      }
    };
  },
  mounted() {
    deatil(this.$route.query.data).then(res => {
      this.form = res.data.data;
      this.form = {
        categoryId: res.data.data.categoryId,
        name: res.data.data.name,
        subtitle: res.data.data.subtitle,
        stock: res.data.data.stock,
        subImages: res.data.data.subImages,
        detail: res.data.data.detail,
        price: res.data.data.price,
        status: res.data.data.status,
        id: res.data.data.id
      };
    });
    category1().then(res => {
      this.region1list = res.data.data;
    });
  },
  methods: {
    onEditorChange(v) {
      console.log(v);
      this.form.detail = v.html;
    },
    regionChange(v) {
      this.region1list.map((item, i) => {
        if (item.name === v) {
          console.log(item);
          category1({ categoryId: item.id }).then(res2 => {
            this.region2list = res2.data.data;
          });
        }
      });
    },
    onSubmit() {
      updataComm(this.form).then(res => {
        this.$message({
          message: res.data.data,
          type: "success"
        });
        this.$router.push("/product/index/comm");
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>


<style lang="scss" scoped>
@import "@/Scss/index.scss";
.updata_content {
  @include Wm(85%);
}
.image {
  width: 100px;
  height: 100%;
}
.updata_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.updata_title {
  display: inline-block;
  font-weight: normal;
}

.updata {
  @include Wm(95%);
}
</style>